{assign var="title" value=$block.blockLabel}
<div id="formsuccess" style="display:none">{if isset($formSuccess) && $formSuccess == 'true'}currentPage{/if}</div>
<form method="post" action="?module=website&action=block_BlocksRight&docId={$block.documentId}&docLang={$block.documentLang}&blockId={$block.blockId}" class="nyroModal" name="form">
{t assignTo=titleHeader}Assign rights to{/t}
{include file="$MODULES_DIR/backoffice/templates/block/modal/ModalTitle.html" title="$titleHeader $title"}
<div id="modalContent">
    <table class="rightTable">
        <tr>
            <td>
                <table>
                    <tr>
                        <td>{icon name="user.png"}</td>
                        <td>{t}USER(S){/t} :</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input type="text" value="{t}login, lastname, firstname{/t}" id="user"/><input type="hidden" value="" id="selectedUser"/></td>
                        <td style="vertical-align: middle;">
                            <button type="button" class="greyButton" id="addUser">{icon name="add.png"}</button>
                        </td>
                    </tr>
                    <tr>
                        <td>{icon name="group.png"}</td>
                        <td>{t}GROUP(S){/t} :</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <select multiple="multiple" size="6" id="unAssignedGroups">
                                {foreach from=$unAssignedGrps item=group}
                                <option value="{$group->getUniqueId()}">{$group->getLabel()}</option>
                                {/foreach}
                            </select>
                        </td>
                        <td style="vertical-align: middle;">
                            <button type="button" class="greyButton" id="addGroup">{icon name="add.png"}</button>
                        </td>
                    </tr>
                </table>
            </td>
            <td class="rightsBorderLeft">
                <table>
                    <tr><td>{t}Allowed group(s) or user(s){/t} :</td></tr>
                    <tr>
                        <td id="usersListContainer">
                            <select multiple="multiple" size="9" id="usersList">
                                {if isset($assignedUsers) && count($assignedUsers) > 0}
                                {foreach from=$assignedUsers item=user}
                                {if $user->getModel() == 'modules_users/group'}
                                <option value="{$user->getUniqueId()}" class="group">{$user->getLabel()}</option>
                                {else}
                                <option value="{$user->getUniqueId()}" class="user">{$user}</option>
                                {/if}
                                {/foreach}
                                {/if}
                            </select>
                            {if isset($assignedUsers) && count($assignedUsers) > 0}
                            {foreach from=$assignedUsers item=user}
                            <input type="hidden" class="userItem" id="item{$user->getUniqueId()}" value="{$user->getUniqueId()}" name="form[userItem][]" />
                            {/foreach}
                            {/if}
                            <input type="hidden" value="submit" name="form[submit]" />
                        </td>
                    </tr>
                    <tr>
                        <td><button type="button" class="greyButton" id="remove">{icon name="less.png"}</button></td>
                    </tr>
                </table>

            </td>
        </tr>
    </table>
</div>
{include file="$MODULES_DIR/backoffice/templates/block/modal/ModalFooter.html"}
</form>

<script type="text/javascript">
    {literal}
    $(document).ready(function()
	{
        $('#addUser').click(function(event){
           if($('#selectedUser').val() != '')
           {
               if($('#usersList option.user[value='+$('#selectedUser').val()+']').text() == '')
               {
                    $('#usersList').append('<option class="user" value="'+$('#selectedUser').val()+'">'+$('#user').val()+'</option>');
                    $('#usersListContainer').append('<input type="hidden" class="userItem" id="item'+$('#selectedUser').val()+'" value="'+$('#selectedUser').val()+'" name="form[userItem][]" />');
                    $('#user').val('');
               }
           }
        });

        $('#addGroup').click(function(event){
           $.each($.makeArray($("#unAssignedGroups option:selected")), function(i, selection){
                $('#usersList').append('<option class="group" value="'+$(selection).val()+'">'+$(selection).text()+'</option>');
                $('#usersListContainer').append('<input type="hidden" class="userItem" id="item'+$(selection).val()+'" value="'+$(selection).val()+'" name="form[userItem][]" />');
                $(selection).remove();
            });
        });

        $('#remove').click(function(event){
            $.each($.makeArray($("#usersList option:selected")), function(i, selection){
                if($(selection).hasClass('group'))
                {
                    $('#unAssignedGroups').append('<option value="'+$(selection).val()+'">'+$(selection).text()+'</option>');
                    $('#item'+$(selection).val()).remove();
                    $(selection).remove();
                }
                else
                {
                    $('#item'+$(selection).val()).remove();
                    $(selection).remove();
                }
            });
        });

        $('#user').click(function(){ $(this).val(''); });
        $("#user").autocomplete("?module=users&action=ajaxGetUserGroup", {
            minChars: 3,
            max: 20,
            autoFill: false,
            scrollHeight: 220,
            formatItem: function(item)
            {
                 return item[1];
            }
        }).result(function(event, item){
            $('#selectedUser').val(item[0]);
            $(this).val(item[1]);
        });
    });
    {/literal}
</script>